<template>
  <div class="app-container" align="center">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" :inline="true" align="center">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="科室选择" prop="deptId">
        <el-select v-model="queryParams.deptId" placeholder="请选择">
          <el-option
            v-for="item in deptList"
            :key="item.deptId"
            :label="item.deptName"
            :value="item.deptId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="handleQuery">查询</el-button>
        <el-button type="primary" size="mini" @click="resetQuery">清空</el-button>
      </el-form-item>
    </el-form>
    <el-form ref="form" :model="form" >
      <el-table v-loading="loading" :data="skd_ruleList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="医生名称" align="center" width="110" prop="name" />
        <el-table-column label="星期一上午" align="center" prop="oneUp" width="72px">
          <template slot-scope="scope">
          <el-checkbox false-label="0" true-label="1" v-model="scope.row.oneUp"></el-checkbox>
        </template>
        </el-table-column>
        <el-table-column label="星期一下午" align="center" prop="oneDown" width="72px">
          <template slot-scope="scope">
            <el-checkbox false-label="0" true-label="1" v-model="scope.row.oneDown"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="星期二上午" align="center" prop="twoUp" width="72px">
          <template slot-scope="scope">
            <el-checkbox false-label="0" true-label="1" v-model="scope.row.twoUp"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="星期二下午" align="center" prop="twoDown" width="72px">
          <template slot-scope="scope">
            <el-checkbox false-label="0" true-label="1" v-model="scope.row.twoDown"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="星期三上午" align="center" prop="threeUp" width="72px">
          <template slot-scope="scope">
            <el-checkbox false-label="0" true-label="1" v-model="scope.row.threeUp"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="星期三下午" align="center" prop="threeDown" width="72px">
          <template slot-scope="scope">
            <el-checkbox false-label="0" true-label="1" v-model="scope.row.threeDown"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="星期四上午" align="center" prop="fourUp" width="72px">
          <template slot-scope="scope">
            <el-checkbox false-label="0" true-label="1" v-model="scope.row.fourUp"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="星期四下午" align="center" prop="fourDown" width="72px">
          <template slot-scope="scope">
            <el-checkbox false-label="0" true-label="1" v-model="scope.row.fourDown"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="星期五上午" align="center" prop="fiveUp" width="72px">
          <template slot-scope="scope">
            <el-checkbox false-label="0" true-label="1" v-model="scope.row.fiveUp"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="星期五下午" align="center" prop="fiveDown" width="72px">
          <template slot-scope="scope">
            <el-checkbox false-label="0" true-label="1" v-model="scope.row.fiveDown"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="星期六上午" align="center" prop="sixUp" width="72px">
          <template slot-scope="scope">
            <el-checkbox false-label="0" true-label="1" v-model="scope.row.sixUp"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="星期六下午" align="center" prop="sixDown" width="72px">
          <template slot-scope="scope">
            <el-checkbox false-label="0" true-label="1" v-model="scope.row.sixDown"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="星期日上午" align="center" prop="sevenUp" width="72px">
          <template slot-scope="scope">
            <el-checkbox false-label="0" true-label="1" v-model="scope.row.sevenUp"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="星期日下午" align="center" prop="sevenDown" width="72px">
          <template slot-scope="scope">
            <el-checkbox false-label="0" true-label="1" v-model="scope.row.sevenDown"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="挂号限额" align="center" prop="skLimit" width="110px">
          <template slot-scope="scope">
            <el-form-item>
              <el-input size="mini" v-model="scope.row.skLimit" style="width: 60px" />
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <el-form-item label="规则名称" prop="ruleName" style="margin-left: 400px;margin-top: 20px">
        <el-input
          v-model="queryParams.ruleName"
          placeholder="请输入规则名称"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="规则描述" prop="description" style="margin-top: 20px">
        <el-input
          v-model="queryParams.description"
          placeholder="请输入规则描述"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item style="margin-top: 20px">
        <template>
          <el-button v-if="this.$route.query.id!=null" type="primary" icon="el-icon-download" size="mini" @click="handleUpdate('upd')">修改排版规则表</el-button>
          <el-button v-else type="primary" icon="el-icon-download" size="mini" @click="handleUpdate('add')">新增排版规则表</el-button>
        </template>
      </el-form-item>
    </el-form>
    </el-form>

  </div>
</template>

<script>
  import {listSkd_rule_item,getSkd_rule_item,addSkd_rule_item,updateSkd_rule_item,delSkd_rule_item,exportSkd_rule_item} from "@/api/sms/skd_rule_item";
  import { addSkd_rule,updateSkd_rule } from "@/api/sms/skd_rule";
  import {listDept} from "@/api/system/dept"

  export default {
    name: "Skd_rule_item",
    data() {
      return {
        //部门列表
        deptList: [],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        data: [
          {id: null,
            staffId:[],  //用户id
            name:null,  //用户名
            skLimit:null,  //挂号限额
            daysOfWeek:null,//排班时间
            ruleName:null,
            description:null,

            oneUp:null,
            oneDown:null,
            twoUp:null,
            twoDown:null,
            threeUp:null,
            threeDown:null,
            fourUp:null,
            fourDown:null,
            fiveUp:null,
            fiveDown:null,
            sixUp:null,
            sixDown:null,
            sevenUp:null,
            sevenDown:null,}
        ],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 排班规则表格数据
        skd_ruleList: [{
          oneUp:null,
          oneDown:null,
          twoUp:null,
          twoDown:null,
          threeUp:null,
          threeDown:null,
          fourUp:null,
          fourDown:null,
          fiveUp:null,
          fiveDown:null,
          sixUp:null,
          sixDown:null,
          sevenUp:null,
          sevenDown:null
        }],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          deptId: null,
          ruleName:null,
          description:null,
          id:null
        },
        // 表单参数
        form: {
        },
        // 表单校验
        rules: {
        }
      };
    },
    created() {
      this.getList();
    },
    methods: {
      getDeptList() {
        listDept().then(response=>{
          this.deptList = response.data;
        })
      },
      /** 查询排班规则列表 */
      getList() {
        this.loading = true;
        if(this.$route.query.id!=null){
          getSkd_rule_item(this.$route.query.id).then(response => {
            this.skd_ruleList = response.rows;
            this.total = response.total;
            this.queryParams.ruleName=this.skd_ruleList[0].ruleName;
            this.queryParams.description=this.skd_ruleList[0].description;
            this.queryParams.deptId=this.skd_ruleList[0].deptId;
            for(let i=0;i<this.skd_ruleList.length; i++){
              let str=[];
              for(let j=0;j<this.skd_ruleList[i].daysOfWeek.length;j++){
                str[j]=this.skd_ruleList[i].daysOfWeek.charAt(j);
              }
              this.skd_ruleList[i].oneUp = str[0];
              this.skd_ruleList[i].oneDown = str[1];
              this.skd_ruleList[i].twoUp = str[2];
              this.skd_ruleList[i].twoDown = str[3];
              this.skd_ruleList[i].threeUp = str[4];
              this.skd_ruleList[i].threeDown = str[5];
              this.skd_ruleList[i].fourUp = str[6];
              this.skd_ruleList[i].fourDown = str[7];
              this.skd_ruleList[i].fiveUp = str[8];
              this.skd_ruleList[i].fiveDown = str[9];
              this.skd_ruleList[i].sixUp = str[10];
              this.skd_ruleList[i].sixDown = str[11];
              this.skd_ruleList[i].sevenUp = str[12];
              this.skd_ruleList[i].sevenDown = str[13];
            }
            this.loading = false;
          });
        }else{
          listSkd_rule_item(this.queryParams).then(response => {
            this.skd_ruleList = response.rows;
            this.total = response.total;
            this.loading = false;
          });
        }
        this.getDeptList()
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          ruleName:null,
          description:null,
          deptId:null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.data = selection.map(item => item);
        this.ids = selection.map(item => item.id);
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加排班规则";
        this.getDeptList()
      },
      /** 修改按钮操作 */
      handleUpdate(result) {
        for(let i = 0; i<this.data.length; i++){
          let days = "";
          this.data[i].oneUp == 1 ? days+="1" : days+="0";
          this.data[i].oneDown == 1 ? days+="1" : days+="0";
          this.data[i].twoUp == 1 ? days+="1" : days+="0";
          this.data[i].twoDown == 1 ? days+="1" : days+="0";
          this.data[i].threeUp == 1 ? days+="1" : days+="0";
          this.data[i].threeDown == 1 ? days+="1" : days+="0";
          this.data[i].fourUp == 1 ? days+="1" : days+="0";
          this.data[i].fourDown == 1 ? days+="1" : days+="0";
          this.data[i].fiveUp == 1 ? days+="1" : days+="0";
          this.data[i].fiveDown == 1 ? days+="1" : days+="0";
          this.data[i].sixUp == 1 ? days+="1" : days+="0";
          this.data[i].sixDown == 1 ? days+="1" : days+="0";
          this.data[i].sevenUp == 1 ? days+="1" : days+="0";
          this.data[i].sevenDown == 1 ? days+="1" : days+="0";
          this.data[i].daysOfWeek = days;//排班时间
          if(!this.data[i].daysOfWeek.includes("1")){// 1不存在
            this.$message.error('请选择给 “"'+this.data[i].name+'"” 至少一个上班时间！');
            return;
          }else if(this.data[i].skLimit == null ){
            this.$message.error('请给 “"'+this.data[i].name+'"” 输入挂号限额！');
            return;
          }
        }
        if(this.queryParams.deptId == null){
          this.$message.error('请选择科室！');
          return;
        }else if(this.queryParams.ruleName == null){
          this.$message.error('请输入规则名称！');
          return;
        }else if(this.queryParams.description == null){
          this.$message.error('请输入规则描述！');
          return;
        }
        this.submitForm(result);
      },
      /** 提交按钮 */
      submitForm(result) {
        if (result == 'upd') {
          this.queryParams.id=this.$route.query.id;
            updateSkd_rule(this.queryParams).then(response =>{//,this.data
              if(response.code == 200){
                this.msgSuccess("修改成功");
              }
            });
          for (let i=0;i<this.data.length; i++) {
            updateSkd_rule_item(this.data[i]).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }
            });
          }
        } else if(result == 'add') {
          addSkd_rule(this.queryParams).then(response =>{//,this.data
            if(response.code == 200){
              this.msgSuccess("新增成功");
            }
          });
          for (let i=0;i<this.data.length; i++){
            addSkd_rule_item(this.data[i]).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }
            });
          }
        }
        this.$router.push("/skd/skd_rule");
      },
      //取消，回退页面操作
      close(){
        this.$store.dispatch("tagsView/delView", this.$route);
        this.$router.push("/sdk/skd_rule");
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm('是否确认删除排班规则编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delSkd_rule_item(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有排班规则数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportSkd_rule_item(queryParams);
        }).then(response => {
          this.download(response.msg);
        }).catch(function() {});
      }
    }
  };
</script>
